MagicalCoder.install({
  /*左侧可拖拽的源*/
  dragItems: [
    {
      name: "我的组件",
      icon: "layui-icon layui-icon-face-smile",
      children: [
        {
          name: "模板下载",
          icon: "ri-checkbox-indeterminate-line",
          html: "<mc-download></mc-download>",
        },
      ]
    }
  ],
  /*自定义组件和属性*/
  components: [
    {
      "identifier": "mc-download",
      "properties": {
        "primary": 0,
        "name": "模板下载",
        "treeExtraName": {"attr": [], "text": true},
        "dragInto": false,
        "duplicate": true,
        "duplicateAttr": [],
        "copy": true,
        "paste": false,
        "canDelete": true,
      },
      "attributes": [
        {
          "title": "属性",
          "active": true,
          "content": [
            {
              type: "html",
              category: "配置",
              callback: {
                htmlCallback: function (param) {
                  return `
   <div class="layui-row layui-col-space3" id="downloadApp">
    <template>
      <div class="layui-col-xs12">
        <el-row>
          <div :span="24">
            <template>
              <el-form v-if="dataManager" v-model="dataManager.fileInfo" label-position="left" size="mini"
                       label-width="80px">
                <el-form-item label="下载api">
                  <el-input clearable v-model="dataManager.downloadApi" placeholder="magicalCoderUrl"></el-input>
                </el-form-item>
                <el-form-item label="ref">
                  <el-input clearable v-model="dataManager.refName" placeholder="refName"></el-input>
                </el-form-item>
                <el-form-item label="数据源api">
                <el-row>
                  <el-col :span="8">
                      <el-select clearable v-model="dataManager.method" placeholder="magicalCoderUrl">
                        <el-option label="GET" value="GET"></el-option>
                        <el-option label="POST" value="POST"></el-option>
                      </el-select>
                  </el-col>
                  <el-col :span="16">

                      <el-input clearable v-model="dataManager.url" placeholder="magicalCoderUrl"></el-input>

                  </el-col>
                </el-row>
        </el-form-item>
                <el-form-item label="文本">
                  <el-input clearable v-model="dataManager.buttonText" placeholder="文本"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                  <el-input clearable v-model="dataManager.iconName" placeholder="icon"></el-input>
                </el-form-item>
                <el-form-item label="样式">
                  <el-select v-model="dataManager.typeName" clearable placeholder="请选择样式">
                    <el-option
                      v-for="temp in typeOptions"
                      :key="temp.value"
                      :label="temp.label"
                      :value="temp">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="尺寸">
                  <el-select v-model="dataManager.sizeName" clearable placeholder="请选择尺寸">
                    <el-option
                      v-for="temp in sizeOptions"
                      :key="temp.value"
                      :label="temp.label"
                      :value="temp">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="类型">
                  <el-checkbox v-model="dataManager.plainName" label="朴素" border></el-checkbox>
                  <el-checkbox v-model="dataManager.roundName" label="圆角" border></el-checkbox>
                  <el-checkbox v-model="dataManager.circleName" label="圆形" border></el-checkbox>
                  <el-checkbox v-model="dataManager.disableName" label="禁用" border></el-checkbox>
                  <el-checkbox v-model="dataManager.loadingName" label="加载中" border></el-checkbox>
                </el-form-item>
                <el-row style="margin:10px 0 20px;">
                  <el-button size="mini" type="primary"  @click="saveStatus">保存</el-button>
                  <el-button size="mini" type="primary"  @click="openConfig">配置</el-button>
                  <el-button size="mini" type="danger"  @click="clearDataManager">清空配置</el-button>
                </el-row>

              </el-form>
              <el-dialog fullscreen  :visible.sync="dialogVisible">
                <el-row>

                  <el-form :inline="true">
                     <el-form-item label="位置">
                      <el-input-number clearable :min="0" size="small" :max="jsonOutput.length" v-model="dataManager.fieldBody.index" placeholder="位置"></el-input-number>
                    </el-form-item>
                    <el-form-item label="字段">
                      <el-input size="small" clearable v-model="dataManager.fieldBody.field" placeholder="名称"></el-input>
                    </el-form-item>
                    <el-form-item label="excel字段">
                      <el-input size="small" clearable v-model="dataManager.fieldBody.comment" placeholder="excel字段"></el-input>
                    </el-form-item>
                    <el-form-item label="默认值">
                      <el-input size="small" clearable v-model="dataManager.fieldBody.defVal" placeholder="默认值"></el-input>
                    </el-form-item>
                    <el-form-item label="操作">
                      <el-button size="mini" type="primary"  @click="addField">添加</el-button>
                      <el-button size="mini" type="primary"  @click="saveStatus">保存</el-button>

                    </el-form-item>
                  </el-form>

                </el-row>
                <el-divider></el-divider>
               <el-scrollbar style="width: 100%;">
                 <el-col :span="12">
                   <el-input type="textarea"   :autosize="{ minRows: 2, maxRows: 30}"  v-model="dataManager.config.jsonInput" @blur="formatJson"></el-input>
                 </el-col>
                 <el-col :span="12">
                   <el-table
                     v-if="tableRefesh"
                     :height="635"
                   :data="jsonOutput"
                   >
                     <el-table-column label="操作" fixed="left" width="100" align="center">
                       <template #default="scope">
                         <el-button size="mini" type="danger"  @click="delField(scope.$index)">删除</el-button>
                       </template>
                     </el-table-column>
                     <el-table-column type="index" label="位置" width="150" align="center">
                       <template #default="scope">
                         <el-input-number :min="0" :max="jsonOutput.length-1" size="mini" v-model="scope.$index" @change="changePos"></el-input-number>
                       </template>

                     </el-table-column>
                     <el-table-column prop="field" label="字段" align="center">
                       <template #default="scope">
                         <el-input @change="returnJson" v-model="scope.row.field"></el-input>
                       </template>
                     </el-table-column>
                     <el-table-column prop="comment" label="excel字段" align="center">
                       <template #default="scope">
                         <el-input @change="returnJson" v-model="scope.row.comment"></el-input>
                       </template>
                     </el-table-column>
                     <el-table-column prop="defVal" label="默认值" align="center">
                       <template #default="scope">
                         <el-input @change="returnJson" v-model="scope.row.defVal"></el-input>
                       </template>
                     </el-table-column>
                   </el-table>
                 </el-col>
               </el-scrollbar>
              </el-dialog>
            </template>
          </div>
        </el-row>
      </div>
    </template>
  </div>
                  `;
                },
                render: function (param) {
                  setTimeout(function () {
                    let focusNode = param.focusNode;
                    new Vue({
                      el: '#downloadApp',
                      data: {
                        tableRefesh: true,
                        sizeOptions: [
                          {label: "medium", value: "medium"},
                          {label: "small", value: "small"},
                          {label: "mini", value: "mini"},
                          {label: "default", value: ""},
                        ],
                        typeOptions: [
                          {label: "text", value: "text"},
                          {label: "primary", value: "primary"},
                          {label: "success", value: "success"},
                          {label: "info", value: "infoc"},
                          {label: "warning", value: "warning"},
                          {label: "danger", value: "danger"},
                        ],
                        dialogVisible: false,
                        dataManager: {
                          refName: "",
                          "method": "GET",
                          "url": "",
                          "downloadApi": "/youyaboot-admin/magical_lowcode/openapi/f432448d26054eba8426d4eaf1946e3d/api-new-download",
                          "typeName": {"label": "success", "value": "success"},
                          "plainName": true,
                          "roundName": true,
                          "sizeName": {"label": "mini", "value": "mini"},
                          "buttonText": "模板下载",
                          "iconName": "el-icon-s-promotion",
                          "fieldBody": {
                            "index": 0,
                            "field": "",
                            "comment": "",
                            "defVal": ""
                          },
                          config: {
                            jsonInput: ' [\n' +
                              '    {\n' +
                              '      "field": "oldId",\n' +
                              '      "comment": "批量插入的编号凭借"\n' +
                              '    }\n' +
                              '  ]\n' +
                              '\n' +
                              '\n' +
                              '\n' +
                              '\n'
                          }
                        }
                      },
                      computed: {
                        jsonOutput: function () {
                          try {
                            return JSON.parse(this.dataManager.config.jsonInput);
                          } catch (error) {
                            return []
                          }
                        }
                      },
                      methods: {
                        //根据dataManager.fieldBody的index添加字段
                        addField() {
                          let data = {
                            "field": this.dataManager.fieldBody.field,
                            "comment": this.dataManager.fieldBody.comment,
                            "defVal": this.dataManager.fieldBody.defVal
                          }
                          this.jsonOutput.splice(this.dataManager.fieldBody.index, 0, data)
                          this.returnJson()
                        },
                        //删除字段
                        delField(i) {
                          this.jsonOutput.splice(i, 1)
                          this.returnJson()
                        },
                        //刷新表格
                        refreshTable() {
                          this.tableRefesh = false
                          this.$nextTick(() => {
                            this.tableRefesh = true
                          })
                        },
                        //变换位置
                        changePos(newVal, oldVal) {
                          this.jsonOutput.splice(newVal, 0, this.jsonOutput.splice(oldVal, 1)[0])
                          this.returnJson()
                          this.refreshTable()
                        },
                        //右侧json变成左侧
                        returnJson() {
                          this.dataManager.config.jsonInput = JSON.stringify(this.jsonOutput, null, 2)
                        },
                        //左侧json变成右侧
                        formatJson() {
                          try {
                            const parsedJson = JSON.parse(this.dataManager.config.jsonInput);
                            this.dataManager.config.jsonInput = JSON.stringify(parsedJson, null, 2);
                          } catch (error) {
                            alert('Invalid JSON: ' + error.message);
                          }
                        },
                        //打开dialog
                        openConfig() {
                          this.dialogVisible = true
                        },
                        saveStatus() {
                          MAGICAL_CODER_API.changeAttr({
                            node: focusNode,
                            name: "datamanager",
                            value: JSON.stringify(this.dataManager)
                          }, false)
                          this.$message.success("保存成功")
                        },
                        clearDataManager() {
                          MAGICAL_CODER_API.changeAttr({
                            node: focusNode,
                            name: "datamanager",
                            value: ""
                          }, false)
                          this.$message.success("清空成功")
                        },
                        importDataManager() {
                          if (MAGICAL_CODER_API.getFocusNode().attributes.datamanager) {
                            let renderInfo = JSON.parse(MAGICAL_CODER_API.getFocusNode().attributes.datamanager.replaceAll('&quot;', '"'))
                            console.log("重新载入的参数", renderInfo);
                            this.dataManager = renderInfo
                          }
                        }
                      },
                      mounted: function () {
                        this.importDataManager()
                      }
                    })
                  }, 5)
                }
              }
            },
          ]
        }
      ]
    }
  ]
});
